<template>
	<w-container>
		<w-navbar id="#my-nav" leftIcon="back-btn" :titleStyle="{color:'#222'}" title="兑换记录" bgColor="#f5f5f5"></w-navbar>
		<view class="pa-16">
			<view class="item" v-for="(item,idx) in list" :key="idx" @click="$u.route('/pages/order/defaultDetail',{id:item.order_id,orderType:4})">
				<w-image :src="item.list_image" width="83" height="83" radius="8"></w-image>
				<view class="right">
					<view class="flex flex-dir-col">
						<text class="font-color-black font-size-16 font-w-500 text-overflow">{{ item.goods_name }}</text>
						<view class="flex mt-12">
							<w-icon :name="crystalIcon(item.crystal_type)" size="20"></w-icon>
							<text class="ml-8 font-size-16 font-color-dark">{{ item.crystal_number }}</text>
						</view>
						<text class="font-size-10 font-color-describe mt-4">{{ $u.timeFormat(item.create_time, 'yyyy.mm.dd hh:MM:ss') }}</text>
					</view>
					<w-icon name="right3" size="24"></w-icon>
				</view>
			</view>
			<!-- 加载 -->
			<w-loading :type="loadingType" emptyType="search" class="mt-12" emptyTop="200"></w-loading>
		</view>
	</w-container>
</template>

<script>
	import { exchangeRecord } from '@/api/shop/shop.js';
	import crystalMixin from '@/mixins/crystalMixin.js';
	export default {
		mixins:[crystalMixin],
		data() {
			return {
				param:{ page:1 },
				
				list:[],
				isNext:true,
				loadingType:'none'
			};
		},
		created() {
			this.getList();
		},
		methods:{
			// 刷新
			refresh() {
				this.list = []
				this.isNext = true
				this.loadingType = 'none'
				this.getList()
			},
			
			// 获取列表
			getList() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				exchangeRecord(this.param).then(res=>{
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.param.page<last_page){
						this.param.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'nomore';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{ 
					this.loadingType = 'empty'
				}).finally(()=>{
					uni.stopPullDownRefresh()
				})
			}
		},
		onReachBottom() {
			this.getList() 
		},
		onPullDownRefresh() {
			this.param.page = 1;
			this.refresh()
		}
	}
</script>

<style lang="scss">
	.item{
		width: 100%;
		height: 200rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 18rpx;
		margin-bottom: 24rpx;
		@extend .flex-center-sb;
		>.right{
			width: calc(100% - 186rpx);
			height: 100%;
			@extend .flex-center-sb;
		}
	}
</style>
